<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米商城</title>
	<script src="jquery-3.3.1.js"></script>
	<style type="text/css">
		h1,h2,h3,h4,h5,h6,div,li,ul,ol{margin:-10px;padding:0px;}/*公共样式*/

		ul{list-style-type: none;}/*去除所有的ul格式*/
		/*导航栏样式*/
		#nav{height:50px;margin-top:0px;border:0 solid black;background-color: black}
		#nav ul li{color: gray;float: left;text-align: none;height: 22px;margin: 0px;padding: 13px 4px}
		#nav ul li a{text-decoration: none;text-align: center;color:gray;font-size: 12px}
		#nav ul li a:hover{color:white;}
		#nav ul+a{position: absolute;left:1300px;text-decoration: none;color:gray;padding: 15px}
		#nav ul+a:hover{color:blue;background: white;font-size: 16px;font-weight: bolder}

		/*商品栏样式*/
		#product{height: 100px;border:0px solid black;background-color: white;margin: 10px -10px 0 -10px;}
		#product div.pict{float: left;margin-left: 200px;margin-top: 20px}
		#product div.sp{position:absolute;float: left;margin-left: 300px;margin-top: 0px;width: 800px;height: 95px}
		#product div.sp ul{padding: 27px 15px;margin-top: 9px;margin-left: 10px;}
		#product div.sp ul a{text-align: none;text-decoration: none;letter-spacing: 2px;padding: 10px;font-size: 16px;color: black;}
		#product div.sp ul a:hover{color:red;}

		/*主界面*/
		#page {margin-top: 10px}
		#page div ul{padding: 0px;margin: 0px}
		#page div ul li{margin: 0px;padding: 14px 10px;color:white;}
		#page div ul li a{text-decoration: none;color:white}
		#page div ul li:hover{background-color:rgba(255,228,196,0.5);}
		#page div ul li img{width: 14px;height: 17px;float: right;margin-top: 3px}
	</style>
</head>
<body>
	<!-- 导航栏 -->
	<div id="nav">
		<ul>
			<li style="width: 200px;padding: 0px"></li>
			<li><a href="#">小米商城</a></li><li>|</li>
			<li><a href="#">MIUI</a></li><li>|</li>
			<li><a href="#">IoT</a></li><li>|</li>
			<li><a href="#">云服务</a></li><li>|</li>
			<li><a href="#">金融</a></li><li>|</li>
			<li><a href="#">有品</a></li><li>|</li>
			<li><a href="#">小爱开放平台</a></li><li>|</li>
			<li><a href="#">政企服务</a></li><li>|</li>
			<li><a href="#">资质证照</a></li><li>|</li>
			<li><a href="#">协议规则</a></li><li>|</li>
			<li><a href="#">下载app</a></li><li>|</li>
			<li><a href="#">Select Region</a>
			<li style="width: 150px"></li>
			<li><a href="#">登录</a></li><li>|</li>
			<li><a href="#">注册</a></li><li>|</li>
			<li><a href="#">消息通知</a></li><li>|</li>
			<li style="width: 50px"></li>
			
		</ul>
		<a href="#">购物车</a>
	</div>

	<!-- 商品栏 -->
	<div id="product">
		<!-- 米图标 -->
		<div class="pict">
			<img src="./images/米图标2.png" style="width: 55px;height: 55px;float: left;" />
		</div>

		<!-- 商品栏内容 -->
		<div class="sp">
			<ul>
				<a href="#">小米手机</a>
				<a href="#">红米手机</a>
				<a href="#">电视</a>
				<a href="#">笔记本</a>
				<a href="#">家电</a>
				<a href="#">新品</a>
				<a href="#">路由器</a>
				<a href="#">智能硬件</a>
				<a href="#">服务</a>
				<a href="#">社区</a>
			</ul>
		</div>
		<form>
			<input type="text" name="sousuo" style="position: absolute;left: 1150px;top: 75px;height: 40px;width: 200px" />
			<input type="submit" name="sou" value="查找" style="position: absolute;left: 1354px;top: 75px;height: 46px;width:46px">
		</form>
	</div>

	<!-- 主界面 -->
	<div id="page">
		<img src="./images/主页界面.jpg" style="width: 1200px;height: 500px;position: absolute;left: 200px" />
		<div style="position: absolute;left: 200px;border:0px solid red;background-color: gray;width: 200px;height: 500px;margin: 0px">
			<ul>
				<li><a href="#">手机电话卡</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">电视盒子</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">笔记本平板</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">家电插线板</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">出行穿戴</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">智能路由器</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">电源配件</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">健康儿童</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">耳机音响</a><img src="./images/箭头.jpg"/></li>
				<li><a href="#">生活箱包</a><img src="./images/箭头.jpg"/></li>
			</ul>
		</div>
	</div>
	</script>
</body>
</html>